import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { connect } from 'react-redux';
import { TabbarAction } from '../../actions/tabbar';
import { Redirect } from 'react-router-dom';
import { HomeOutlined, HomeFilled, MessageOutlined, CompassOutlined, MessageFilled, CompassFilled, UserOutlined } from '@ant-design/icons';

import HomePage from '../../page/homePage/index'
import FindPage from '../../page/findPage/index'
import MsgPage from '../../page/msgPage/index'
import UserPage from '../../page/userPage/index'

class NavLinkBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home',
            hidden: false,
            fullScreen: false,
            user: null
        };
    }
    componentDidMount = () => {
        let user = localStorage.getItem('user')
        user = JSON.parse(user)
        if (user === null) {
            return
        }
        this.setState({
            user: user.data
        })
    }
    render() {
        const navList = [
            {
                path: 'home',
                text: '首页',
                type: <HomeFilled style={{ fontSize: '25px' }}></HomeFilled>,
                unselect: <HomeOutlined style={{ fontSize: '25px' }}></HomeOutlined>,
                component: <HomePage route={this.state.selectedTab} />,
            },
            {
                path: 'find',
                text: '发现',
                type: <CompassFilled style={{ fontSize: '25px' }} />,
                unselect: <CompassOutlined style={{ fontSize: '25px' }} />,
                component: <FindPage />,
            },
            {
                path: 'msg',
                text: '消息',
                type: <MessageFilled style={{ fontSize: '25px' }}></MessageFilled>,
                unselect: <MessageOutlined style={{ fontSize: '25px' }}></MessageOutlined>,
                component: <MsgPage />,
            },

            {
                path: 'me',
                text: '我',
                type: <UserOutlined style={{ fontSize: '25px' }}></UserOutlined>,
                unselect: <UserOutlined style={{ fontSize: '25px' }}></UserOutlined>,
                component: <UserPage />,
            }
        ]
        const redirect = this.props.user.redirectTo
        // console.log(redirect)
        // console.log(this.state.user!=null );
        return (
            <div>
                {redirect !== undefined && this.state.user != null ? <Redirect to='home' /> : <Redirect to='login' />}
                <div className='container'>
                    <TabBar
                        unselectedTintColor="#999"
                        tintColor="#1890ff"
                        barTintColor="#f6f6f6"
                        tabBarPosition="bottom"
                    >
                        {navList.map((v, index) => {
                            return (
                                <TabBar.Item
                                    // badge={v.path}
                                    title={v.text}
                                    key={index+''}
                                    icon={v.unselect}
                                    selectedIcon={v.type}
                                    selected={this.props.state.selectedTab === v.path}
                                    onPress={() => {
                                        this.props.TabbarAction(v.path)
                                    }}
                                >
                                    {v.component}
                                </TabBar.Item>
                            )
                        })
                        }
                    </TabBar>

                </div>
            </div>

        );
    }
}
const mapStateToProps = (state) => {
    return {
        state: state.tabbar,
        user: state.user
    }
}
const actionCreator = { TabbarAction }
export default connect(mapStateToProps, actionCreator)(NavLinkBar);